<card-layout body-css="md-padding">

  <header-section>
    <div layout="row" layout-align="space-between-center" flex>
      <div class="card-title" flex> {{"views.define-feed-access-control.AC" | translate}} </div>
      <h2 class="card-sub-header">{{vm.stepNumber}} {{"views.define-feed-general-info.of" | translate}} {{vm.totalSteps}}</h2>
    </div>
    <div layout="row" layout-align="space-between-center" flex class="layout-padding-top">
      <div class="card-sub-header" flex> {{"views.define-feed-access-control.Dfadac" | translate}} </div>
      <thinkbig-feed-errors-card-header></thinkbig-feed-errors-card-header>
    </div>
  </header-section>

  <body-section>

  <ng-form name="vm.feedAccessControlForm">

    <div layout="column">
    <entity-access-control entity="vm.model" entity-type="feed"  the-form="vm.feedAccessControlForm"></entity-access-control>
    </div>
    <div layout="column" ng-if="vm.securityGroupsEnabled == true">
      <div class="md-subhead">{{"views.ipmort_feed.data-access-control" | translate}}</div>

      <md-input-container class="md-block layout-padding-top-bottom flex-gt-sm condensed" flex-gt-sm="" style="" >
        <label class="label-small md-container-ignore">{{"views.ipmort_feed.hadoop-sekyriti" | translate}}</label>
        <md-chips ng-model="vm.model.securityGroups" md-autocomplete-snap
                  md-transform-chip="vm.transformChip($chip)"
                  md-require-match="true" class="layout-padding-top-bottom">
          <md-autocomplete
              md-min-length="0"
              md-selected-item="vm.securityGroupChips.selectedItem"
              md-search-text="vm.securityGroupChips.searchText"
              md-items="item in vm.feedSecurityGroups.querySearch(vm.securityGroupChips.searchText)"
              md-item-text="item.name"
              md-no-cache="true"
              placeholder="Add a Hadoop Security Group">
            <span md-highlight-text="vm.securityGroupChips.searchText">{{item.name}}</span>
          </md-autocomplete>
          <md-chip-template>
                            <span>
                              <strong>{{$chip.name}}</strong>
                            </span>
          </md-chip-template>
        </md-chips>
      </md-input-container>

    </div>
    <div>Index Control</div>
    <div layout="row" layout-padding>
      <div flex="40" style="align-self:center;">
        <span>Index feed metadata and schema</span>
        <div class="hint">
          Index metadata and schema for the feed in a search engine.
        </div>
      </div>
      <div flex class="">
        <md-checkbox
            ng-model="vm.model.allowIndexing"
            aria-label="Indexing Allowed"
            ng-true-value=true
            ng-false-value=false
            ng-disabled="false"
            class="md-primary md-align-top-left" flex>
        </md-checkbox>
      </div>
    </div>

    <br/><br/><br/>
    <thinkbig-step-buttons can-continue="vm.feedAccessControlForm.$valid" step-index="{{::vm.stepIndex}}"></thinkbig-step-buttons>

  </ng-form>

  </body-section>
</card-layout>
